<template>
   <!-- 页面标题区 -->
    <a-row  class="page-content-header">
      <a-col :span="22"><span class="title">{{routeName}}</span></a-col>
      <a-col :span="1"><a-button type="primary">保存权限</a-button></a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-row style="font-size: 18px;font-weight: bold;padding-left: 60px;margin-bottom: 10px;">
          App角色
        </a-row>
        <a-row>
          <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="treeData"
            style="font-size: 18px;margin-left: 60px;" @select="">

          </a-tree>
        </a-row>
      </a-col>


      <a-col :span="6">
      <a-row style="font-size: 18px;font-weight: bold;padding-left: 60px;;margin-bottom: 10px;">
          Web端应用
        </a-row>
        <a-row>
          <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
          checkable :tree-data="treeData" style="font-size: 18px;margin-left: 60px;">
          <template #title="{ title, key }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
            <template v-else>{{ title }}</template>
          </template>
        </a-tree>
        </a-row>
      </a-col>


      <a-col :span="6">
      <a-row style="font-size: 18px;font-weight: bold;padding-left: 60px;;margin-bottom: 10px;">
          移动端应用
        </a-row>
        <a-row>
          <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
          checkable :tree-data="treeData" style="font-size: 18px;margin-left: 60px;">
          <template #title="{ title, key }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
            <template v-else>{{ title }}</template>
          </template>
        </a-tree>
        </a-row>
      </a-col>

      <a-col :span="6">
      <a-row style="font-size: 18px;font-weight: bold;padding-left: 60px;;margin-bottom: 10px;">
          微信小程序
        </a-row>
        <a-row>
          <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
          checkable :tree-data="treeData3" style="font-size: 18px;margin-left: 60px;">
          <template #title="{ title, key }">
            <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
            <template v-else>{{ title }}</template>
          </template>
        </a-tree>
        </a-row>
      </a-col>

    </a-row>
</template>

<script setup>

import { computed,ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute(); // 使用 Vue Router 的钩子函数 useRoute 获取当前路由对象
// 计算属性，获取当前路由的元数据中的标题
const routeName = computed(() => route.meta.title);
// import { settingOutlined } from '@ant-design/icons-vue';
// const background = new URL('@/assets/login-bg.jpg', import.meta.url).href;

   const expandedKeys = ref([]);
    const selectedKeys = ref([]);
    const treeData = ref([
      {title: '销售管理平台',key: '0-0',mark:'false',
        children: [
          {title: 'Web端应用',key: '2-0-0',mark:'true',},
          {title: '客户端',key: '2-0-1',mark:'true',},
          {title: '客户端',key: '0-0-1',mark:'true',},
        ],
      },
      {title: '群利多',key: '2-0',mark:'false',
        children: [
          {title: 'Web端应用',key: '2-0-0',mark:'true',},
          {title: '客户端',key: '2-0-1',mark:'true',},
        ],
      },
      {title: 'AI称管理平台', key: '3-0',mark:'false',
        children: [
          {title: 'Web端应用',key: '3-0-0',mark:'true',},
          {title: '客户端',key: '3-0-1',mark:'true',},
        ],},
    ]);
    const treeData3 = ref([])

</script>



<style lang="less" scoped>
.page-content-header{
  padding: 42px 24px 16px 60px;
}
.title {
  display: block;
  float: left;
  margin-bottom: 0;
  padding-right: 12px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}
.container {
  display: flex;
  height: 100%;
  padding-top: 120px;
  flex-direction: column;
  align-items: center;
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
}
</style>
